@import '../../assets/css/var.less';

.app-hover-block {
    padding: 3px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;

    .iconfont {
        font-size: @supgpt-font-size-2;
        line-height: @supgpt-font-size-2;
    }

    svg {
        width: @supgpt-font-size-2;
        height: @supgpt-font-size-2;
        pointer-events: none;
    }

    path {
        fill: @supgpt-grey-8;
    }

    &-hovered {
        color: @supgpt-brand-7;
        background: @supgpt-brand-7-a15;

        .iconfont {
            color: @supgpt-brand-7
        }

        path {
            fill: @supgpt-brand-7;
        }
    }

    &:hover {
        color: @supgpt-brand-7;
        background: @supgpt-brand-7-a15;

        .iconfont {
            color: @supgpt-brand-7
        }

        path {
            fill: @supgpt-brand-7;
        }
    }

    &-content {
        &:hover {
            background: @supgpt-scene-contentbg-4;
        }
    }

    &-content&-hovered {
        background: @supgpt-scene-contentbg-4;
    }
}